<template>
    <div class="container">
        <header>
            <span>商品详情</span>
            <el-button class="r pan-btn green-btn sm-btn" size="small" icon="el-icon-refresh"
                       @click="refresh()"></el-button>
        </header>
        <div class="con">
            <div class="l activity-title">
                <div>活动名称: {{ detailTitleData.name }}</div>
                <div>活动主题: {{ detailTitleData.title }}</div>
                <div>活动期限: {{ detailTitleData.beginTime + '   至   ' +  detailTitleData.endTime }}</div>
                <div>活动模板: {{ detailTitleData.typeIdentification }}</div>
            </div>
            <div class="r">

            </div>
            <div class="table">
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="date"
                            label="日期">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="参与人数">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="分享人数">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="转化数">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="广告位点击">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="区域及占比">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="等">
                    </el-table-column>
                </el-table>
            </div>
            <!--<div class='md_r' id='echart1' :style="{width: '80%', height: '400px',margin: '50px auto'}"></div>-->
            <ve-line :data="chartData"></ve-line>
        </div>
    </div>
</template>
<script>
    import request from '@/utils/request';
    import { param2Obj, parseTime } from '@/utils/index'
    export default {
        name: 'ActivityDetail',
        data() {
            return {
                detailTitleData: {

                },
                activityId: '',
                tableData: [],
                chartData: {
                    columns: ['日期', '访问用户', '下单用户', '下单率'],
                    rows: [
                        {日期: 'Mon', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32},
                        {日期: 'Tue', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26},
                        {日期: 'Wed', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76},
                        {日期: 'Thu', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49},
                        {日期: 'Fri', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323},
                        {日期: 'Sat', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78},
                        {日期: 'Sun', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78}
                    ]
                }
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.activityId = param2Obj(window.location.href).activityId;
                this.getActitvityDateil();
            })
        },
        methods: {
            getActitvityDateil () {
                const _this = this;
                request({
                    url: '/activityConsole/activity/info/id/'+_this.activityId,
                    method: 'get'
                }).then(res => {
                    console.log(res);
                    _this.detailTitleData = res;
                    _this.detailTitleData.beginTime = parseTime(_this.detailTitleData.beginTime);
                    _this.detailTitleData.endTime = parseTime(_this.detailTitleData.endTime);
                }).catch(err => {
                    console.log(err);
                });
            },
            refresh() {
                this.$router.go(0)
            }
        }
    }
</script>
<style scoped>
    .activity-title {
        line-height: 2;
    }

    .table {
        margin: 20px 0;
    }
</style>
